<template>
    <component
      is="a-modal"
      v-model:visible="visible"
      width="70%"
      :title="title"
      :mask-closable="false"
      :ok-loading="loading"
      @cancel="close"
      @before-ok="submit">
      <!-- 表单信息 start -->
      <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
        <a-form-item label="排序" field="sort" >
          <a-input-number mode="button" v-model="formData.sort"  placeholder="请输入" />
        </a-form-item>
        <a-form-item label="跳转地址" field="url" >
          <a-input v-model="formData.url"  placeholder="请输入" />
        </a-form-item>
        <a-form-item label="类型" field="type">
          <sa-radio :data="radioType" v-model="formData.type" @change="radioChange(formData.type)" placeholder="请选择"></sa-radio>
        </a-form-item>
        <a-form-item label="广告图片" required v-if="formData.type=='image'">
          <sa-upload-image v-model="formData.data" :limit="1" :tip="'建议尺寸150px*140px'"></sa-upload-image>
        </a-form-item>
        <a-form-item label="视频"  required v-else>
          <sa-upload-file v-model="formData.video_url"  :draggable="true" :accept="'.mp4,.mov,.avi'" :limit="1"></sa-upload-file>
        </a-form-item>
        <a-form-item label="标题说明" field="title">
            <a-input v-model="formData.title"  placeholder="请输入" />
        </a-form-item>
      </a-form>
      <!-- 表单信息 end -->
    </component>
  </template>
  
  <script setup>
  import { ref, reactive, computed,watch, nextTick } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import swiperApi from '@/api/message/swiper'
  import SaRadio from '@cps/sa-radio/index.vue'
  import SaUploadImage from '@cps/sa-upload-image/index.vue'
  import SaUploadFile from '@cps/sa-upload-file/index.vue'
  import ENUMS from '@/utils/enums'
  import tool from '@/utils/tool';
  import {throttle} from  'lodash'
  const paramsData =ref([])
  const getParams =async(id)=>{
  const {data} =await swiperApi.addContentParams(id)
  paramsData.value =tool.simpleTransformArray(data.area)
  }
  const emit = defineEmits(['success'])
  // 引用定义
  const formRef = ref()
  const mode = ref('')
  const visible = ref(false)
  const loading = ref(false)
  const roleData = ref([])
  const radio_type=ref('')
  const radioType =ref(
   [ {title:'图片',value:'image',},
   {title:'视频',value:'video',}]
)
  let title = computed(() => {
    return (mode.value == 'add' ? '新增' : '编辑')
  })
  // 表单信息
  const formData = reactive({
    sort:0,
    url:'',
    data:'',
    file:'',
    video_url:[],
    title:'',
    position_id:null,
    id:'',
    type:'image',
  }) 
  // 验证规则
  const rules = ref({
    sort:[{ required: true, message: '请输入' }],
    type:[{ required: true, message: '请选择' }],
  });
  // 打开弹框
  const open = async (type = 'add',radioType='image',position_id,id='') => {
    mode.value = type
    radio_type.value=radioType
    visible.value = true
    formRef.value.resetFields()
    formData.position_id=position_id
    await initPage()
    await getParams(position_id)
    if(type=='add'){
      formData.data=''
      formData.video_url=''
    }else{
        formData.id=id
    }
    
  }
  const radioChange=(type)=>{
    console.log('type',type);
        formData.video_url=''
        formData.data=''
}
  // 初始化页面数据
  const initPage = async () => {
  }
  
  // 设置数据
  const setFormData = async (data) => {
    console.log('111',data);
    for (const key in formData) {
      if (data[key] != null && data[key] != undefined) {
        formData[key] = data[key]
        if (key == 'data' && data.type == 'video') {
          formData['video_url'][0] = data.data
        }
        if (key == 'state') { 
          formData[key]=Number(data[key])
        }
      }
    }
    console.log('222',formData);
  }
  
  // 数据保存
  const submit = throttle(async (done) => {
    console.log('2222',formData);
    if(!formData.data && formData.type=='image'){
        Message.error('请上传图片')
        done(false)
        return
    }else if(formData.video_url?.length<1 && formData.type=='video'){
        Message.error('请上传视频')
        done(false)
        return
    }
    
    const validate = await formRef.value?.validate()
    if (!validate) {
      loading.value = true
      try{
        let data = { ...formData }
        if (data.type == 'video' && data.video_url?.length > 0) { 
          data.video_url= data.video_url.join('')
        }
        
      let result = {}
      if (mode.value === 'add') {
        // 添加数据
        data.id = ''
        result = await swiperApi.addContent(data)
      } else {
        // 修改数据
        result = await swiperApi.updateContent(data)
      }
      if (result.code === 200) {
        Message.success('操作成功')
        emit('success')
        done(true)
      }
      // 防止连续点击提交
      setTimeout(() => {
        loading.value = false
      }, 500)
      }catch{
        loading.value = false
      }
    }
    done(false)
  },100)
  
  // 关闭弹窗
  const close = () => (visible.value = false)
  
  defineExpose({ open, setFormData })
  </script>
  